<template>
  <el-row :gutter="20">
    <el-col v-for="(item, i) in list" :key="i" :lg="8" :xl="6">
      <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div class="card-content">
          <div class="card-header">
            <div class="card-title">{{ item.name }}</div>
            <div class="card-option">
              <el-dropdown>
                <span class="el-dropdown-link">操作
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-edit" @click.native="handleEdit(item)">编辑</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <div class="card-desc">{{ item.desc!==''?item.desc:'暂无描述' }}</div>
          <div class="card-info">
            <div class="card-owner">
              <i class="el-icon-user card-owner__icon" />{{ '负责人: ' + item.create_user.name }}
            </div>
            <div class="card-footer_btn">
              <el-button type="text" icon="el-icon-position" @click="handleGoto(item)">进入用例库</el-button>
              <el-button type="text" :icon="item.is_follow?'el-icon-star-on':'el-icon-star-off'" @click="handleFollow(item)">{{ item.is_follow?'已关注':'关注' }}</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'CardList',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({

  }),
  methods: {
    handleEdit(item) {
      this.$emit('edit', item)
    },
    handleDelete(item) {
      this.$emit('delete', item)
    },
    handleGoto(item) {
      this.$emit('goto', item)
    },
    handleFollow(item) {
      this.$emit('follow', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  padding: 15px;
}
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.card-content {
    padding: 10px;

    .card-header {
        display: flex;
        justify-content: space-between;
    }

    .card-title {
        font-size: 16px;
        line-height: 32px;
        font-weight: bold;
        color: #303133;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-desc {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 14px;
        color: #606266;
        height: 48px;
        line-height: 24px;
        width: 80%;
    }

    .card-info {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #606266;
        margin-top: 10px;
        align-items: center;
        .card-owner__icon {
            margin-right: 5px;
        }
    }
}
</style>
